import { getTrafficBusLocation } from './http'

export function morePoint (map) {
  AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {

    if (!PointSimplifier.supportCanvas) {
      alert('当前环境不支持 Canvas！')
      return
    }
    // 没有光晕的点
    var groupStyleMap = {
      '0': {
        pointStyle: {
          //绘制点占据的矩形区域
          content: PointSimplifier.Render.Canvas.getImageContent(
            '../../static/img/white_dot.png',
            function onload() {
              pointSimplifierIns.renderLater()
            },
            function onerror(e) {
              alert('图片加载失败！')
            }),
          //宽度
          width: 6,
          //高度
          height: 6,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null
        }
      },
      '1': {
        pointStyle: {
          //绘制点占据的矩形区域
          content: PointSimplifier.Render.Canvas.getImageContent(
            '../../static/img/green_dot.png',
            function onload() {
              pointSimplifierIns.renderLater()
            },
            function onerror(e) {
              alert('图片加载失败！')
            }),
          //宽度
          width: 6,
          //高度
          height: 6,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null
        }
      },
      '2': {
        pointStyle: {
          //绘制点占据的矩形区域
          content: PointSimplifier.Render.Canvas.getImageContent(
            '../../static/img/blue_dot.png',
            function onload() {
              pointSimplifierIns.renderLater()
            },
            function onerror(e) {
              alert('图片加载失败！')
            }),
          //宽度
          width: 6,
          //高度
          height: 6,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null
        }
      }
    }
    // 车子
    /*var groupStyleMap = {
      '0': {
        pointStyle: {
          //绘制点占据的矩形区域
          content: PointSimplifier.Render.Canvas.getImageContent(
            '../../static/img/white_large_car.png',
            function onload() {
              pointSimplifierIns.renderLater()
            },
            function onerror(e) {
              alert('图片加载失败！')
            }),
          //宽度
          width: 14,
          //高度
          height: 14,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null
        }
      },
      '1': {
        pointStyle: {
          //绘制点占据的矩形区域
          content: PointSimplifier.Render.Canvas.getImageContent(
            '../../static/img/green_large_car.png',
            function onload() {
              pointSimplifierIns.renderLater()
            },
            function onerror(e) {
              alert('图片加载失败！')
            }),
          //宽度
          width: 14,
          //高度
          height: 14,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null
        }
      },
      '2': {
        pointStyle: {
          //绘制点占据的矩形区域
          content: PointSimplifier.Render.Canvas.getImageContent(
            '../../static/img/blue_large_car.png',
            function onload() {
              pointSimplifierIns.renderLater()
            },
            function onerror(e) {
              alert('图片加载失败！')
            }),
          //宽度
          width: 14,
          //高度
          height: 14,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null
        }
      }
    }*/
    // 闪烁的点
    /*var groupStyleMap = {
      '0': {
        pointStyle: {
          content: function(ctx, x, y, width, height) {

            var p = {
              x: x + width / 2,
              y: y + height / 2,
              radius: 2 + 10 * Math.random()
            };

            ctx.beginPath();
            var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
            gradient.addColorStop(0, "rgba(255,255,255,1)");
            gradient.addColorStop(0.2, "rgba(255,255,255,1)");
            gradient.addColorStop(1, "rgba(255,255,255,0.1)");
            ctx.fillStyle = gradient;
            ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
            ctx.fill();

          },
          //宽度
          width: 32,
          //高度
          height: 32,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null
        }
      },
      '1': {
        pointStyle: {
          //绘制点占据的矩形区域
          content: function(ctx, x, y, width, height) {

            var p = {
              x: x + width / 2,
              y: y + height / 2,
              radius: 2 + 10 * Math.random()
            };

            ctx.beginPath();
            var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
            gradient.addColorStop(0, "rgba(86,255,193,1)");
            gradient.addColorStop(0.2, "rgba(86,255,193,1)");
            gradient.addColorStop(1, "rgba(86,255,193,0.1)");
            ctx.fillStyle = gradient;
            ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
            ctx.fill();

          },
          //宽度
          width: 32,
          //高度
          height: 32,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null
        }
      },
      '2': {
        pointStyle: {
          //绘制点占据的矩形区域
          content: function(ctx, x, y, width, height) {

            var p = {
              x: x + width / 2,
              y: y + height / 2,
              radius: 2 + 10 * Math.random()
            };

            ctx.beginPath();
            var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
            gradient.addColorStop(0, "rgba(54,149,255,1)");
            gradient.addColorStop(0.2, "rgba(54,149,255,1)");
            gradient.addColorStop(1, "rgba(54,149,255,0.1)");
            ctx.fillStyle = gradient;
            ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
            ctx.fill();

          },
          //宽度
          width: 32,
          //高度
          height: 32,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null
        }
      }
    }*/

    var pointSimplifierIns = new PointSimplifier({

      zIndex: 300,
      map: map,
      //maxChildrenOfQuadNode:3,
      getPosition: function(item) {

        if (!item) {
          return null
        }

        var parts = item.split(',')

        return [parseFloat(parts[0]), parseFloat(parts[1])]
      },
      getHoverTitle: function(dataItem, idx) {
        let lnglatArr = dataItem.split(',')
        return '经度:' + lnglatArr[0] + ',维度:' + lnglatArr[1]
        // return '序号: ' + idx
      },
      //使用GroupStyleRender
      renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
      renderOptions: {
        //点的样式
        /*pointStyle: {
          //绘制点占据的矩形区域
          content: PointSimplifier.Render.Canvas.getImageContent(
            '../../static/img/bus_location_icon_01.png',
            function onload() {
              pointSimplifierIns.renderLater()
            },
            function onerror(e) {
              alert('图片加载失败！')
            }),
          //宽度
          width: 23,
          //高度
          height: 32,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null
        },*/
        getGroupId: function(item, idx) {
          let groupId
          if (idx < 2000) {
            groupId = '0'
          } else if (idx >= 2000 && idx <= 5000 ) {
            groupId = '1'
          } else {
            groupId = '2'
          }
          return groupId
        },
        groupStyleOptions: function(gid) {

          return groupStyleMap[gid]
        },
        topNAreaStyle: {
          autoGlobalAlphaAlpha: true,
          content: "rect",
          fillStyle: "#de4a22",
          lineWidth: 1,
          strokeStyle: null
        },
        pointHoverStyle: {
          width: 10,
          height: 10,
          content: "circle",
          fillStyle: null,
          lineWidth: 2,
          strokeStyle: "#62e2ed"
        },
        hoverTitleStyle: {
          position: 'top',
          offset: [0, '-100%']
        }
      }
    })

    // window.pointSimplifierIns = pointSimplifierIns;

    pointSimplifierIns.on('pointClick', function(e, record) {
      console.log(record)
    })

    getTrafficBusLocation({
      cb: csv => {
        console.log(data)
        var data = csv.split('\r\n')
        pointSimplifierIns.setData(data)
      }
    })

    //重复render
    setInterval(function() {
      pointSimplifierIns.render();
    }, 500)


  })
}
